<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
  </head>
  <body>
    <div id="felms"></div>
    <script>
        async function load(name) {
            const response = await fetch(name)
            return await response.text()
        }

        async function flems() {
            Flems(document.body, {
                files: [
                    {
                        name: 'viewport.js',
                        content: await load('sample/viewport.js'),
                    },
                    {
                        name: 'app.js',
                        content: await load('sample/app.js'),
                    },
                    {
                        name: 'target.js',
                        content: await load('sample/target.js'),
                    },
                    {
                        name: 'stars.js',
                        content: await load('sample/stars.js'),
                    },
                    {
                        name: 'random.js',
                        content: await load('sample/random.js'),
                    },
                    {
                        name: 'viewport.min.js',
                        type: 'script',
                        content: await load('pixi_viewport.umd.cjs'),
                    }
                ],
                links: [{
                    name: 'PIXI',
                    url: 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.1.2/pixi.min.js',
                }],
                console: false,
            })
        }
        flems()
    </script>
  </body>
</html>
